import React from "react";
import Alert from "@mui/material/Alert";
import { useDispatch, useSelector } from "react-redux";
import "./toast.less";

let timer: NodeJS.Timeout = setTimeout(() => {});
export default function Toast() {
  const { show, msg, type } = useSelector(
    (state: IrootState) => state.toastData
  );
  const dispatch = useDispatch();

  if (show) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      dispatch({
        type: "HIDE_TOAST",
      });
    }, 2000);
  }

  return (
    <div className="toast" style={{ display: show ? "block" : "none" }}>
      <Alert severity={type}>{msg}</Alert>
    </div>
  );
}
